<template>
<div class="shopcart-container">
  <div class="mui-card" v-for="(shopItem,shopIndex) in shopcartList" :key="shopIndex">
        <div class="mui-card-content">
          <div class="mui-card-content-inner">
            <div class="shopcart-item">
             <mt-switch v-model="selectedObj[shopItem.id]" @change="changeSelected(shopItem.id)"></mt-switch>
             <img :src="shopItem.thumb_path"/>
             <div class="itemInfo">
              <h1>{{shopItem.title}}</h1>
              <div class="itemDetail">
                <span class="price">¥{{shopItem.sell_price}}</span>
                <number-box :initCount="countObj[shopItem.id]" :id="shopItem.id"></number-box>
                <a href="#" @click.prevent="deleteItem(shopItem.id)">删除</a>
              </div>
             </div>
           </div>
          </div>
        </div>
    </div>
    <div class="mui-card">
        <div class="mui-card-content">
          <div class="mui-card-content-inner">
            <div class="settlement">
              <div>
                <p>总计（不含运费）</p>
                <p>已选商品<span class="red">{{this.selectedCount}}</span>件,总价<span class="red">¥{{this.amount}}</span></p>
              </div>
              <div class="right">
                <mt-button type="danger"  @click="settlementShopcart">结算</mt-button>
              </div>
            </div>
          </div>
        </div>
    </div>
 
</div>
</template>


<script>
  import numberBox from '../sub-components/shopcart_numberBox.vue'
  import {mapState,mapMutations,mapGetters} from 'vuex'
export default{
  data(){
    return{
      value:false,
      shopcartList:[]

    }
  }, 
  components:{
    numberBox  
  },
  computed:{
    ...mapGetters(["idStr","countObj","selectedObj","selectedCount","amount"])
  },
  created(){
    
  },
  mounted(){
    console.log('idStr',this.idStr)
   this.getShopcartList();
  },
  methods:{
    settlementShopcart(){
  },
  async getShopcartList(){
  if(this.idStr.length==0) return
    const {data}=await this.$http.get(`/api/goods/getshopcarlist/${this.idStr}`)
      if(data.status===0) {
        this.shopcartList=data.message
      }
  },
  ...mapMutations(["delShopcartCount"]),
  ...mapMutations(["changeShopcartSelected"]),
  deleteItem(id){
  var index=this.shopcartList.findIndex(v=>v.id==id)
  this.shopcartList.splice(index,1)
  this.delShopcartCount(id)
  },
  changeSelected(id){
    this.changeShopcartSelected(id)
  }
     
}
}
</script>

<style lang="less">
body{
  background-color: #fff!important;
}
.shopcart-container{  
  background:#eceeec;
  overflow: hidden;
  .red{
    color:red;
    font-weight: bold;
  }
	.shopcart-item{
    display:flex;
    
  	img{
      width: 80px;
      height: 80px;
    }
    .itemInfo{
      flex:1;
      display:flex;
      flex-direction: column;     
      justify-content: space-between;
       h1{
          font-size: 13px;
          font-weight: bold;
        }
      .itemDetail{
         display:flex;
         justify-content: space-between;
         align-items: center;       
        .price{
          color: red;
          font-weight: bold;

        }
        .linePrice{

        }

      }

    }
	}
  .settlement{
    display:flex;
    justify-content: space-between;
    align-items: center; 
    .right{

    }
  }
}
</style>